import { Button, Card, message, Popconfirm, Table } from 'antd';
import { useEffect, useState } from 'react';

import positionService from '@/api/services/security/positionService';
import { Iconify } from '@/components/icon';
import TipIconButton from '@/components/icon/tooltip-icon-button';
import { hasPermission } from '@/utils/permission';

import { SearchForm } from '../role/search-form';

import { PositionModal } from './postion-modal';
import PositionSearchForm from './search-form';
import { PositionType } from './type';

import { ListData, ModalProps } from '#/entity';
import {pagination} from "@/utils/pagination";

export default function Position() {
  const [tableData, setTableData] = useState<ListData<PositionType>>();
  const [searchForm, setSearchForm] = useState<SearchForm>({
    take: 10,
    page: 1,
  });
  useEffect(() => {
    if (hasPermission('DEPARTMENT:POSITION:READ')) {
      positionService.getPositionsList(searchForm).then((res) => {
        setTableData(res);
      });
    }
  }, [searchForm]);
  const columns = [
    {
      title: '岗位名称',
      dataIndex: 'name',
    },
    {
      title: '岗位编码',
      dataIndex: 'code',
    },

    {
      title: '岗位排序',
      dataIndex: 'order',
    },

    {
      title: <div style={{ marginRight: 20 }}>操作</div>,
      align: 'right' as const,
      render: (_: any, record: any) => (
        <div className="flex w-full justify-end text-gray">
          {hasPermission('DEPARTMENT:POSITION:UPDATE') && (
            <TipIconButton
              onClick={() => onEdit(record)}
              tipText={`修改岗位名称为 <${record.name}> 的信息`}
            >
              <Iconify icon="solar:pen-bold-duotone" size={18} />
            </TipIconButton>
          )}
          {hasPermission('DEPARTMENT:POSITION:DELETE') && (
            <Popconfirm
              title={`确定要删除岗位 <${record.name}> 吗？`}
              okText="确定"
              cancelText="取消"
              onConfirm={() => {
                onDelete(record);
              }}
              placement="left"
            >
              <TipIconButton tipText="删除">
                <Iconify icon="mingcute:delete-2-fill" size={18} className="text-error" />
              </TipIconButton>
            </Popconfirm>
          )}
        </div>
      ),
    },
  ];
  const [positionModalProps, setPositionModalProps] = useState<ModalProps<PositionType>>({
    title: '',
    show: false,
    onOk: (values) => {
      setPositionModalProps((prev) => ({
        ...prev,
        show: false,
      }));
      // onOK->刷新页面
      setSearchForm((prev) => ({
        ...prev,
      }));
    },
    onCancel: () => {
      setPositionModalProps((prev) => ({
        ...prev,
        show: false,
      }));
    },
    formValue: {
      code: '',
      name: '',
    },
  });
  const onCreate = () => {
    setPositionModalProps((prev) => ({
      ...prev,
      title: '新增',
      show: true,
      formValue: {
        order: 0,
      },
    }));
  };
  const onEdit = (record) => {
    setPositionModalProps((prev) => ({
      ...prev,
      title: '修改',
      show: true,
      formValue: { ...record },
    }));
  };
  const onDelete = (record: PositionType) => {
    positionService.deletePosition(record.code).then((res) => {
      if (res > 0) {
        message.success('删除成功');
        setSearchForm((prev) => ({ ...prev, page: 1 }));
      }
    });
  };

  const onOk = (values: SearchForm) => {
    setSearchForm({ take: 10, page: 1, ...values });
  };
  const onReset = () => {
    setSearchForm({ page: 1, take: 10 });
  };
  return (
    <>
      <PositionSearchForm onOk={onOk} onReset={onReset} />
      <br />
      <Card
        extra={
          <Button type="primary" onClick={onCreate}>
            新增
          </Button>
        }
      >
        <Table
          size="small"
          rowKey="code"
          columns={columns}
          dataSource={tableData?.data}
          // dataSource={fakeData}
          pagination={pagination({
            page: searchForm, onPageChange: (page, rows) => {
              setSearchForm((prev) => ({
                ...prev,
                page,
                take: rows,
              }));
            }, count: tableData?.count
          })}
        />
        <PositionModal {...positionModalProps} />
      </Card>
    </>
  );
}
